<template>
    <!-- 增删改查 -->
    <el-dialog
        class="dialog"
        title="修改密码"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <!-- 在这里加这个是为了禁用谷歌浏览器的自动填充功能，通过css把这个控件隐藏掉 -->
            <el-input
                type="password"
                name="password"
                class="passHide"
            ></el-input>
            <el-form-item label="旧密码:" prop="old_pwd" class="bg-item">
                <ux-pass
                    v-model="formData.old_pwd"
                    clearable
                    autocomplete="off"
                    maxlength="16"
                    placeholder="请输入旧密码"
                ></ux-pass>
            </el-form-item>
            <el-form-item label="新密码:" prop="new_pwd" class="bg-item">
                <ux-pass
                    v-model="formData.new_pwd"
                    maxlength="16"
                    placeholder="请输入新密码"
                    clearable
                ></ux-pass>
            </el-form-item>
            <el-form-item label="重复新密码:" prop="new_pwdTow" class="bg-item">
                <ux-pass
                    v-model="formData.new_pwdTow"
                    maxlength="16"
                    placeholder="请输入重复新密码"
                    clearable
                ></ux-pass>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({ mixins: [mixinDialogForm] })
export default class Pass extends Vue {
    @Action("coreAccount/pwd") itemEdit: any;
    isEdit: boolean = true;
    formData: any = {
        old_pwd: "",
        new_pwd: "",
        new_pwdTow: ""
    };
    rules: any = {
        old_pwd: [{ required: true, message: "请输入旧密码" }],
        new_pwd: [
            { required: true, message: "请输入新密码" },
            { validator: this.new_pwd }
        ],
        new_pwdTow: [
            { required: true, message: "请输入重复新密码" },
            {
                validator: this.passwordTow
            }
        ]
    };
    // 判断新旧密码是否相同
    new_pwd(rule: any, value: any, callback: Function) {
        let meaasge = "";
        if (this.formData.old_pwd == value) {
            meaasge = "新密码和旧密码不能一样!";
        }
        meaasge ? callback(meaasge) : callback();
    }
    // 判断密码是否相同
    passwordTow(rule: any, value: any, callback: Function) {
        let meaasge = "";
        if (this.formData.new_pwd != value) {
            meaasge = "新密码和重复密码不一致!";
        }
        meaasge ? callback(meaasge) : callback();
    }
}
</script>

<style lang="scss" scoped>
.passHide {
    position: absolute;
    top: -1000px;
    z-index: -99999;
}
</style>
